<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script> -->
  <!-- <script src="./vtable.min.es5.js"></script> -->
  <script src="./vtable.min.js"></script>
  <!-- <script src="./vtable.js"></script> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <button onClick="updateView()">更新数据</button>
  <button onClick="scrollToCol()">滚动到列</button>
  <span id="colNum"></span>
  <button onClick="scrollToRow()">滚动到行</button>
  <span id="rowNum"></span>
  <button onClick="destroy()">销毁</button>
  <button onClick="empty()">置空</button>
  <!-- https://codesandbox.io/s/vtable-summary-row-mh3fjg?file=/src/index.ts:9-18 -->
  <!-- <div id="tableContainer" style="width: 100%;height:500px;"></div> -->
  <!-- <div id="tableContainer" style="width: 1200px;height:500px;"></div> -->
  <div style="width: 100%;height:400px;">
    <div id="tableContainer" style="width: 100%;height:100%"></div>
  </div>
  <script>
    const dataRows = 50;// 多少行
    const dataCols = 500;// 多少列

    function generateRandomString(length) {
      let result = "";
      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return result;
    }

    const generatePersons = (count) => {
      return Array.from(new Array(count)).map((_, i) => {
        const first = generateRandomString(14);
        const last = generateRandomString(4);
        return {
          id: i + 1,
          email: `${first}_${last}@xxx.com`,
          name: first,
          lastName: last,
        };
      });
    };

    const records = generatePersons(dataRows);

    const columns = [
      {
        field: "id",
        caption: "ID",
        width: 80,
        sort: true
      },
      {
        field: "email",
        caption: "email",
        width: 250,
        cellType: 'link',
        sort: true
      },
      ...new Array(dataCols).fill('').map((v, index) => {
        return {
          field: "full name",
          caption: "Full name" + (index + 1),
          width: 300,
          "headerStyle": {
            textAlign: 'center'
          },
          columns: [
            {
              field: "name",
              caption: "First Name",
              width: 150,
              "headerStyle": {
                textAlign: 'center'
              },
            },
            {
              field: "lastName",
              caption: "Last Name",
              width: 150,
              "headerStyle": {
                textAlign: 'center'
              },
              // fieldFormat: (record, row, index) => {},
              style: {
                // https://visactor.io/vtable/guide/theme_and_style/style
                textAlign: 'center',
                // color: '#fff',
                color: (args) => {
                  let lastName = args.value;
                  if (['a', 'b', 'c', 'd', 'e', 'f', 'g'].includes(lastName[0])) {
                    return '#fff';
                  }
                  return '#333';
                },
                // bgColor: 'green',
                bgColor: (args) => {
                  let lastName = args.value;
                  if (['a', 'b', 'c', 'd', 'e', 'f', 'g'].includes(lastName[0])) {
                    return 'red';
                  }
                  return args.row % 2 === 0 ? '#fff' : '#fbfbfc';
                }
              },
            }
          ]
        }
      }),
      // {
      //   field: "email",
      //   caption: "email",
      //   width: 250,
      //   cellType: 'link',
      //   sort: true
      // },

    ];
    let option = {
      container: document.getElementById("tableContainer"),
      records,
      columns,
      frozenColCount: 1,
      allowFrozenColCount: 0,
      defaultRowHeight: 34,
      defaultHeaderRowHeight: 34,
      // heightMode: 'autoHeight',
      // widthMode: 'autoWidth',
      autoFillWidth: true,
      autoFillHeight: true,
      hover: {
        // highlightMode: 'row',// cross
        disableHover: true,// 不响应鼠标 hover 交互
      },
      theme:
        VTable.themes.ARCO.extends({
          frameStyle: {
            borderColor: '#f00', // 边框颜色
            // borderColor: 'rgba(0,0,0,0)',
            borderLineWidth: 2,    // 边框宽度
            // shadowBlur: 0,// 解决没有到边界的问题
          },
          bodyStyle: {
            // hover: {
            //   cellBgColor: '#FFC0CB',
            //   inlineRowBgColor: '#FFD700', // 金色
            //   inlineColumnBgColor: '#ADFF2F' // 绿黄色
            // }
          },
          // scrollStyle: {
          //   width: 15
          // },
          "headerStyle": {
            // fontWeight: 100
          },
          scrollStyle: {
            visible: 'always'
          }
        }),
      select: {
        disableSelect: true,
        disableHeaderSelect: true
      },
      // pagination: {
      //   perPageCount: 20,
      //   currentPage: 1
      // }
    };

    const tableInstance = new VTable.ListTable(option);
    // 方法一：
    // const { CLICK_CELL } = VTable.ListTable.EVENT_TYPE;
    // tableInstance.on(CLICK_CELL, (params) => {
    //   // console.log(142, params);
    //   if (params.field === 'email') {
    //     console.log(params.dataValue);
    //   }
    // });
    // 方法二：
    tableInstance.on('click_cell', (params) => {
      if (params.field === 'email') {
        console.log(params.dataValue);
      }
    });

    // 更新表格数据
    function updateView() {
      const records = generatePersons(dataRows);
      tableInstance.setRecords(records);
      tableInstance.renderWithRecreateCells();
      document.getElementById('colNum').innerHTML = '';
      document.getElementById('rowNum').innerHTML = '';
      tableInstance.scrollToCell({
        row: 2,
        col: 1
      });
    }
    // 滚动到列
    function scrollToCol() {
      let colNum = Math.floor(Math.random() * dataCols);
      tableInstance.scrollToCell({
        col: colNum
      });
      document.getElementById('colNum').innerHTML = colNum;
    }
    // 滚动到行
    function scrollToRow() {
      let rowNum = Math.floor(Math.random() * dataRows);
      tableInstance.scrollToCell({
        row: rowNum
      });
      document.getElementById('rowNum').innerHTML = rowNum;
    }
    function destroy() {
      if (tableInstance && tableInstance.release) {
        tableInstance.release()
      }
    }
    function empty() {
      tableInstance && tableInstance.setRecords([]);
      tableInstance && tableInstance.renderWithRecreateCells();
    }
  </script>
</body>

</html>